<template>
  <el-dialog
    v-model="visible"
    title="选择规格族"
    :width="'60%'"
    :before-close="handleClose"
  >
    <section>
      <header>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="family_id"
              placeholder="输入规格族ID筛选"
            ></el-input
          ></el-col>
          <el-col :span="4">
            <AzChosen
              v-model="available_zone_id"
              v-model:available_zone_name="available_zone_name"
              :visible="visible"
              @getAllFamily="getAllFamily"
            />
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getAllFamily">搜索</el-button>
          </el-col>
        </el-row>
      </header>
      <!-- 表格 -->
      <el-table
        border
        :data="familyList"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="family_id" label="规格族ID"></el-table-column>
        <el-table-column prop="family_cn" label="规格族名称"></el-table-column>
        <el-table-column prop="cpu_name" label="CPU型号"></el-table-column>
        <el-table-column prop="gpu_show_type" label="GPU型号"></el-table-column>
        <el-table-column prop="cpu" label="vCPU"> </el-table-column>
        <el-table-column prop="ram" label="内存"> </el-table-column>
        <el-table-column prop="gpu" label="GPU数量"> </el-table-column>
        <el-table-column prop="available_zone_name" label="可用区">
        </el-table-column>
        <el-table-column prop="bound" label="已导入">
          <template #default="scope">
            {{ scope.row.bound ? "是" : "否" }}
          </template>
        </el-table-column>
      </el-table>
    </section>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm" type="primary">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
 
<script>
import { computed, ref, watch } from 'vue';
import GoodsService from '@/service/eks/goods';
import { ElMessage } from 'element-plus';
import AzChosen from './AzChosen.vue';
export default {
  props: {
    specList: {
      type: Array,
      default: () => [],
      required: true
    },
    modelValue: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  emits: ['update:modelValue', 'update:specList'],
  components: {
    AzChosen
  },
  setup(props, { emit }) {
    const visible = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val)
      }
    })


    const handleClose = (done) => {
      visible.value = false
      done()
    }


    const family_id = ref('09fb5a98-7919-11ec-a7a9-16cc3e7992e1');
    const familyList = ref([]);
    const available_zone_id = ref('');
    const available_zone_name = ref('');


    const getAllFamily = () => {
      if (!available_zone_id.value) {
        ElMessage.error('请选择可用区')
        return
      }
      if (!family_id.value) {
        ElMessage.error('请输入规格族id')
        return
      }

      GoodsService.getAllFamily({
        family_id: family_id.value,
        available_zone_id: available_zone_id.value
      }).then(res => {
        if (res.code === 'Success') {
          familyList.value = res.data.spec_list?.map(el => {
            let obj = {
              ...el,
              ...res.data,
              available_zone_name: available_zone_name.value
            }
            delete obj?.spec_list
            return obj
          })
        }
      })
    }

    const selectionList = ref([]);
    const handleSelectionChange = (val) => {
      selectionList.value = val;
    }
    const confirm = () => {
      emit('update:specList', selectionList.value);
      visible.value = false;
    }

    return {
      visible,
      handleClose,
      family_id,
      available_zone_id,
      available_zone_name,
      familyList,
      getAllFamily,
      selectionList,
      handleSelectionChange,
      confirm
    }
  }
}

</script>

<style lang="scss" scoped>
</style>